<template>
  <div class="wrapper">
    <!-- 减少 -->
    <transition name="decrement">
      <div class="decrease" v-if="food.count">
        <svg class="icon" aria-hidden="true" @click.stop="undataFoodCount(false)">
          <use xlink:href="#icon-jianshao-huoyue"></use>
        </svg>
      </div>
    </transition>

    <!-- 计数 -->
    <div class="count" v-if="food.count">{{food.count}}</div>
    <!-- 增加 -->
    <div class="increase">
      <svg class="icon" aria-hidden="true" @click.stop="undataFoodCount(true)">
        <use xlink:href="#icon-zengjia-huoyue"></use>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    food: Object
  },
  methods: {
    //触发 vuex 里 food.count 更新
    undataFoodCount(isAdd) {
      this.$store.dispatch("updataFoodCount", { isAdd, food: this.food });
    }
  }
};
</script>
<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.wrapper {
  display: flex;
  .decrease {
    font-size: 0.3rem;
    /* 准备动画 */
    &.decrement-enter,&.decrement-leave-to{
        opacity: 0;
        transform: translateX(15px) rotate(180deg)
    }
    /* 过度动画 */
    &.decrement-enter-active,&.decrement-leave-active{
        transition: all .3s;
    }
    
  }
  .count {
    font-size: 0.3rem;
    padding: 0 10px;
    line-height: 0.3rem;
    text-align: center;
  }
  .increase {
    font-size: 0.3rem;
  }
}
</style>
